<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="6">
				<el-card shadow="never" header="处理逻辑说明">
					<el-timeline>
						<el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading"
							>1.远程获取表单配置参数和表单的值</el-timeline-item
						>
						<el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替"
							>2.根据配置构建表单组件</el-timeline-item
						>
						<el-timeline-item timestamp="合并form对象和表单值">3.给表单赋值</el-timeline-item>
					</el-timeline>
					<el-alert
						title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上."
						type="warning"
						show-icon
					></el-alert>
				</el-card>
				<el-card shadow="never" header="双向绑定">
					<el-button type="primary" @click="setName">改变输入框的值</el-button>
					<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="动态表单渲染器">
					<sc-form ref="formref" v-model="form" :config="config" :loading="loading">
						<el-button type="primary" @click="save">保 存</el-button>
						<el-button @click="reset">重 置</el-button>
					</sc-form>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never" header="表单输出">
					<pre>{{ form }}</pre>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
export default {
	name: 'formRender',
	data() {
		return {
			loading: false,
			config: {},
			form: {}
		}
	},
	mounted() {
		//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
		const config = {
			labelWidth: '130px',
			labelPosition: 'right',
			size: 'medium',
			formItems: [
				{
					label: 'ElementPlus',
					component: 'title'
				},
				{
					label: '输入框',
					name: 'name',
					value: '',
					component: 'input',
					options: {
						maxlength: '20',
						placeholder: 'Activity name'
					},
					rules: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
					requiredHandle: '$.required==true'
				},
				{
					label: '栅格(12/24)',
					name: 'name2',
					value: '',
					component: 'input',
					span: 12,
					options: {
						placeholder: 'span: 12'
					}
				},
				{
					label: '栅格(12/24)',
					name: 'name3',
					value: '',
					component: 'input',
					span: 12,
					options: {
						placeholder: 'span: 12'
					}
				},
				{
					label: '选择器(多选)',
					name: 'select',
					value: '',
					component: 'select',
					span: 24,
					options: {
						remote: {
							api: `${this.$CONFIG.API_URL}/system/dic/get`,
							data: { name: 'a' }
						},
						multiple: true,
						items: [
							{
								label: '选项1',
								value: '1'
							},
							{
								label: '选项2',
								value: '2'
							}
						]
					},
					rules: [{ required: true, message: 'Please input Activity name', trigger: 'change' }],
					requiredHandle: '$.required==true'
				},
				{
					label: '选择器(单选)',
					name: 'select2',
					value: '',
					component: 'select',
					span: 24,
					options: {
						remote: {
							api: `${this.$CONFIG.API_URL}/system/dic/get`,
							data: { name: 'b' }
						},
						items: [
							{
								label: '选项1',
								value: '1'
							},
							{
								label: '选项2',
								value: '2'
							}
						]
					}
				},
				{
					label: '级联选择器',
					name: 'cascader',
					value: '',
					component: 'cascader',
					span: 24,
					options: {
						items: [
							{
								label: 'Guide',
								value: 'guide',
								children: [
									{
										label: 'Disciplines',
										value: 'disciplines'
									},
									{
										label: 'Consistency',
										value: 'consistency'
									}
								]
							},
							{
								label: 'Resource',
								value: 'resource',
								children: [
									{
										label: 'Axure Components',
										value: 'axure'
									},
									{
										label: 'Sketch Templates',
										value: 'sketch'
									},
									{
										label: 'Design Documentation',
										value: 'docs'
									}
								]
							},
							{
								label: 'Component',
								value: 'component'
							}
						]
					}
				},
				{
					label: '多选框',
					name: 'checkbox',
					component: 'checkbox',
					span: 24,
					tips: '多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象',
					options: {
						items: [
							{
								label: '选项1',
								name: 'option1',
								value: false
							},
							{
								label: '选项2',
								name: 'option2',
								value: false
							}
						]
					},
					hideHandle: '$.required==true'
				},
				{
					label: '多选框组',
					name: 'checkboxGroup',
					value: [],
					component: 'checkboxGroup',
					span: 24,
					options: {
						items: [
							{
								label: '选项1',
								value: 'option1'
							},
							{
								label: '选项2',
								value: 'option2'
							}
						]
					},
					hideHandle: '$.required==true'
				},
				{
					label: '单选',
					name: 'radio',
					value: '1',
					component: 'radio',
					options: {
						items: [
							{
								label: '选项1',
								value: '1'
							},
							{
								label: '选项2',
								value: '2'
							}
						]
					},
					hideHandle: '$.required==true'
				},
				{
					label: '开关',
					name: 'required',
					message: '演示如何使用表达式动态显隐和必填，试试打开和关闭开关',
					value: false,
					component: 'switch'
				},
				{
					label: '日期/时间',
					name: 'date',
					value: '',
					component: 'date',
					options: {
						type: 'datetime',
						valueFormat: 'YYYY-MM-DD HH:mm:ss'
					},
					rules: [{ required: true, message: 'Please input Data', trigger: 'change' }]
				},
				{
					label: '滑块',
					name: 'slider',
					value: 0,
					component: 'slider',
					options: {
						marks: {
							0: '0°C',
							8: '8°C',
							37: '37°C'
						}
					}
				},
				{
					label: '数值',
					name: 'number',
					value: 0,
					component: 'number'
				},
				{
					label: '颜色',
					name: 'color',
					value: '',
					component: 'color'
				},
				{
					label: '评分',
					name: 'rate',
					value: 0,
					component: 'rate'
				},
				{
					label: 'SCUI扩展',
					component: 'title'
				},
				{
					label: '表格选择器',
					name: 'tableselect',
					value: {},
					component: 'tableselect',
					span: 24,
					options: {
						apiObj: '$API.demo.page',
						column: [
							{
								label: 'ID',
								prop: 'id',
								width: 150
							},
							{
								label: '姓名',
								prop: 'user'
							}
						],
						props: {
							label: 'user',
							value: 'id',
							keyword: 'keyword'
						}
					}
				},
				{
					label: '上传',
					component: 'upload',
					options: {
						items: [
							{
								label: '图像1',
								name: 'img1',
								value: ''
							},
							{
								label: '图像2',
								name: 'img2',
								value: ''
							}
						]
					}
				},
				{
					label: '富文本',
					name: 'text',
					value: '',
					component: 'editor'
				}
			]
		}

		const form = {
			name: 'Activity name',
			checkbox: {
				option1: true
			},
			checkboxGroup: ['option1'],
			select: ['1'],
			select2: '1',
			cascader: ['resource', 'docs'],
			tableselect: {
				user: '何敏',
				id: '360000197302144442'
			},
			text: '<p><span style="font-size: 28px;">Editor</span></p>\n<table style="border-collapse: collapse; width: 100%;" border="1">\n<tbody>\n<tr>\n<td style="width: 47.4544%; background-color: #ecf0f1;">Name</td>\n<td style="width: 47.4544%;">SCUI</td>\n</tr>\n<tr>\n<td style="width: 47.4544%; background-color: #ecf0f1;">Describe</td>\n<td style="width: 47.4544%;">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>'
		}

		setTimeout(() => {
			this.config = config
		}, 500)

		this.loading = true
		setTimeout(() => {
			this.form = form
			this.loading = false
		}, 100)
	},
	methods: {
		setName() {
			this.form.name = 'New Title'
		},
		setConfig() {
			this.config.formItems[2].span = this.config.formItems[2].span === 24 ? 12 : 24
			this.config.formItems[3].span = this.config.formItems[3].span === 24 ? 12 : 24
		},
		save() {
			this.$refs.formref.validate((valid, obj) => {
				if (valid) {
					console.log(this.form)
					alert('submit!')
				} else {
					this.$refs.formref.scrollToField(Object.keys(obj)[0])
					return false
				}
			})
		},
		reset() {
			this.$refs.formref.resetFields()
		}
	}
}
</script>

<style></style>
